<template>
  <div class="data-panel">
    <!-- <div class="title">{{ $t('labels.dayliyData') }}</div> -->

    <div class="panel-content">
      <div class="search-bar">
        <el-date-picker
          style="margin-right: 5px"
          v-model="myDate"
          type="daterange"
          :clearable="false"
          :start-placeholder="$t('el.datepicker.startDate')"
          :end-placeholder="$t('el.datepicker.endDate')"
          @change="value => $emit('changeDate', value)">
        </el-date-picker>
        <el-select
          style="margin-right: 5px; width: 200px"
          v-model="dateType"
          placeholder="请选择查看:汇总/单个"
          @change="value => $emit('changeType', value)">
          <el-option
            v-for="res in dateTypeList"
            :key="res.id"
            :label="res.label"
            :value="res.id"></el-option>
        </el-select>
        <el-input
          style="width: 200px"
          placeholder="请输入渠道"
          clearable
          v-model="channelValue"
          @change="value => $emit('changeChannel', value)"></el-input>
      </div>

      <avue-crud
        :loading="loading"
        :page="page"
        :option="tableOptions"
        :data="dayCountList"
        :header-cell-class-name="() => 'panel-table-header'">
      </avue-crud>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      channelValue: '',
      dateType: '',
      page: {
        total: 1,
      },
      myDate: [],
      dateTypeList: [
        { id: 1, label: '单个' },
        { id: 2, label: '汇总' },
      ],
    }
  },
  props: {
    total: {
      type: Number,
      default: 1,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    dateRange: {
      type: Array,
      default() {
        return []
      },
    },
    dayCountList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  computed: {
    tableOptions() {
      return {
        header: false,
        border: true,
        menu: false,
        height: 500,
        column: [
          {
            label: '渠道',
            prop: 'channel',
          },
          {
            label: '日期',
            prop: 'date',
            formatter: row => this.$dayjs.unix(row?.date).format('YYYY-MM-DD'),
          },

          {
            label: '订单数量',
            prop: 'order_count',
          },
          {
            label: '新增用户数量',
            prop: 'new_user_count',
          },
          {
            label: '总用户数',
            prop: 'user_count',
          },
          {
            label: '总金额',
            prop: 'price_sum',
            formatter: row => row?.price_sum / 10000,
          },
        ],
      }
    },
  },
  watch: {
    dateRange: {
      handler(newVal) {
        this.myDate = newVal
      },
    },
    total: {
      handler(newVal) {
        this.page.total = newVal
      },
    },
  },
  mounted() {
    this.myDate = this.dateRange
    this.page.total = this.total
  },
}
</script>

<style lang="scss" scoped>
.data-panel {
  margin-bottom: 20px;
  .title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .panel-content {
    .search-bar {
      margin-bottom: 8px;
    }
  }
}
</style>
